<template>
  <div class="projects-page">
    <!-- 分类标题和返回按钮 -->
    <div class="page-header">
      <h1>{{ categoryName }}项目</h1>
      <button @click="$router.go(-1)" class="back-button">
        <i class="fas fa-arrow-left"></i> 返回分类
      </button>
    </div>

    <!-- 搜索框 -->
    <div class="search-box">
      <input
          v-model="searchQuery"
          :placeholder="`搜索${categoryName}项目...`"
          @input="filterProjects"
      >
      <button @click="filterProjects">
        <i class="fas fa-search"></i>
      </button>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">加载中...</div>

    <!-- 项目列表 -->
    <div v-else class="project-list">
      <div
          v-for="project in filteredProjects"
          :key="project.id"
          class="project-card"
          @click="viewProjectDetail(project.id)"
      >
        <div class="project-image">
          <img :src="project.image" :alt="project.name">
        </div>
        <div class="project-info">
          <h3>{{ project.name }}</h3>
          <div class="project-meta">
            <span class="region">{{ project.region }}</span>
            <span class="level">{{ project.level }}</span>
          </div>
          <p class="brief">{{ project.brief }}</p>
        </div>
      </div>

      <div v-if="filteredProjects.length === 0" class="no-result">
        暂无{{ categoryName }}项目数据
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { fetchProjectsByCategory } from '@/api/projectApi'

export default {
  name: 'CategoryProjectsView',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const loading = ref(true)
    const projects = ref([])
    const searchQuery = ref('')

    // 分类名称映射
    const categoryMap = {
      'folk-literature': '民间文学',
      'traditional-music': '传统音乐',
      'traditional-dance': '传统舞蹈',
      'traditional-drama': '传统戏剧',
      'quyi': '曲艺',
      'traditional-sports': '传统体育',
      'recreation-acrobatics': '游艺与杂技',
      'traditional-art': '传统美术',
      'traditional-craft': '传统技艺',
      'traditional-medicine': '传统医药',
      'folk-custom': '民俗'
    }

    // 获取当前分类名称
    const categoryName = computed(() => {
      return categoryMap[route.params.categoryId] || route.params.categoryId

    })

    // 过滤项目
    const filteredProjects = computed(() => {
      if (!searchQuery.value) return projects.value

      const query = searchQuery.value.toLowerCase()
      return projects.value.filter(project =>
          project.name.toLowerCase().includes(query) ||
          project.region.toLowerCase().includes(query) ||
          project.brief.toLowerCase().includes(query)
      )
    })

    // 查看项目详情
    const viewProjectDetail = (projectId) => {
      router.push({
        name: 'ProjectDetail',
        params: {
          categoryId: route.params.categoryId,
          projectId
        }
      })
    }

    // 加载数据 - 修改了数据映射以匹配数据库结构
    onMounted(async () => {
      try {
        const dbProjects = await fetchProjectsByCategory(route.params.categoryId)
        console.log('接口返回的数据:', dbProjects)
        // 将数据库项目转换为符合组件需求的格式
        projects.value = dbProjects.map(project => ({
          id: project.id,
          name: project.name,
          region: project.region,
          level: project.level,
          brief: project.brief,
          image: project.image // 使用数据库中的 image 字段作为封面图
        }))
      } catch (error) {
        console.error('加载项目失败:', error)
      } finally {
        loading.value = false
      }
    })

    return {
      loading,
      categoryName,
      projects,
      searchQuery,
      filteredProjects,
      viewProjectDetail
    }
  }
}
</script>


<style scoped>
.projects-page {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 60px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 2rem;
  color: #333;
}

.back-button {
  padding: 8px 15px;
  background: #f5f5f5;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.back-button:hover {
  background: #e0e0e0;
}

.search-box {
  display: flex;
  max-width: 500px;
  margin-bottom: 30px;
}

.search-box input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}

.search-box button {
  padding: 10px 15px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.loading {
  text-align: center;
  padding: 50px;
  font-size: 1.2rem;
}

.project-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 25px;
}

.project-card {
  border: 1px solid #eaeaea;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  background: white;
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.project-image {
  height: 200px;
  overflow: hidden;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.project-card:hover .project-image img {
  transform: scale(1.05);
}

.project-info {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.project-info h3 {
  margin: 0 0 10px 0;
  font-size: 1.3rem;
  color: #333;
}

.project-meta {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.project-meta span {
  padding: 3px 8px;
  font-size: 0.8rem;
  border-radius: 4px;
}

.region {
  background: #f0f7ff;
  color: #1a73e8;
}

.level {
  background: #fff0f0;
  color: #e81a1a;
}

.brief {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.no-result {
  text-align: center;
  padding: 50px;
  font-size: 1.1rem;
  color: #666;
  grid-column: 1 / -1;
}
</style>